<template>
    <div id="dr24">
        <Breadcrumb style="margin-bottom: 10px">
            <BreadcrumbItem to="/superAdmin">首页</BreadcrumbItem>
            <BreadcrumbItem>运营分析平台</BreadcrumbItem>
            <BreadcrumbItem>拨打电话情况分析</BreadcrumbItem>
        </Breadcrumb>
        <div style="padding-right: 20px">

            <DatePicker v-model="startTime" type="date" placeholder="选择开始时间" style="width: 150px"></DatePicker>
            至
            <DatePicker v-model="endTime" type="date" placeholder="选择结束时间" style="width: 150px"></DatePicker>
            &nbsp;
            <Button type="info" @click="search()">查询</Button>

        </div>

        <Table style="margin-top: 10px" :maxWidth="1000" :minWidth="10" stripe :columns="columns" :data="data"
               v-if="data&&data.length>0"></Table>


        <div id="loading" v-if="loading">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>


    </div>
</template>
<script type="text/ecmascript-6">
    import sessionUtils from '../../model/sessionUtils';
    import ipServer from '../../model/ip';
    import Axios from 'axios';

    export default {
        data() {
            return {

                selectMobile: "",
                dataTotal: 0,
                reffer: "",
                endTime: "",
                startTime: "",
                loading: false,
                modeData: {},
                modeBool: false,
                pageTotal: 0,
                curPage: 0,
                columns: [
                    {
                        title: '拨打日期',
                        key: 'callTime',
                    },
                    {
                        title: '拨打人数',
                        key: 'callCount',
                    },
                    {
                        title: '信任',
                        key: 'trustCount',

                    }, {
                        title: '一般',
                        key: 'generalCount',

                    }, {
                        title: '很忙',
                        key: 'busyCount',

                    }, {
                        title: '伪用户',
                        key: 'dummyUserCount',

                    }, {
                        title: '赚钱',
                        key: 'moneyCount',

                    },
                    {
                        title: '信任',
                        key: 'partInTrustCount',

                    }
                ],
                data: []
            }
        }
        ,
        mounted() {
            this.getData();
        }
        ,
        methods: {
            pageChange(page) {
                this.getData(page);
            },
            search() {
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));

                if (this.startTime) {
                    param.append('startYearMonthDay', sessionUtils.DateToTime(this.startTime) + "");
                }
                if (this.endTime) {
                    param.append('endYearMonthDay', sessionUtils.DateToTime(this.endTime) + "");
                }

                this.loading = true;
                Axios.post(ipServer + "video/selectCallAnalysis", param)
                    .then(res => {
                        if (res.data.code == 0) {
                            sessionUtils.setSession("token", res.data.token);
                            for (var i = 0; i < res.data.data.result.length; i++) {
                                res.data.data.result[i].registeTime1 = sessionUtils.timestampToTime(res.data.data.result[i].registeTime);

                            }

                            this.data = res.data.data;

                            if (this.data.length == 0)
                                this.$Message.info("查询数据不存在!");
                        } else if (res.data.code == 3) {
                            sessionUtils.clear();
                            this.$router.push("/login");
                            this.$Message.info(res.data.msg);
                        } else {
                            this.$Message.info(res.data.msg);
                        }
                        this.loading = false;
                    })
                    .catch(err => {
                        this.loading = false;
                        this.$Message.info(err);
                    });
            }
            ,
            getData(page) {
                var param = new URLSearchParams();
                param.append('mobile', sessionUtils.getSession("mobile"));
                param.append('token', sessionUtils.getSession("token"));
                if (this.startTime) {
                    param.append('startYearMonthDay', sessionUtils.DateToTime(this.startTime) + "");
                }
                if (this.endTime) {
                    param.append('endYearMonthDay', sessionUtils.DateToTime(this.endTime) + "");
                }
                this.loading = true;
                Axios.post(ipServer + "video/selectCallAnalysis", param)
                    .then(res => {
                        if (res.data.code == 0) {
                            sessionUtils.setSession("token", res.data.token);


                            this.data = res.data.data;

                        } else if (res.data.code == 3) {
                            sessionUtils.clear();
                            this.$Message.info(res.data.msg);
                            this.$router.push("/login");
                        } else {
                            this.$Message.info(res.data.msg);
                        }
                        this.loading = false;
                    })
                    .catch(err => {
                        this.loading = false;
                        this.$Message.info(err);
                    });
            }
        }
    }
</script>


<style scoped>
    @import "../../assets/css/loading.css";

</style>